<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            height: 200%;
        }
    </style>
</head>
<body>
<script>
    // https://blog.csdn.net/qq_40021148/article/details/118144681

    // 防抖
    // 1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
    // 2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
    function debounce(fn, delay) {
        let timer // 创建一个标记用来存放定时器的返回值
        return function () {
            if (timer) { // 每当用户输入的时候把前一个 setTimeout clear 掉
                clearTimeout(timer)
            }

            // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
            timer = setTimeout(() => {
                timer = null
                fn.apply(this, arguments); // arguments是传入的参数
            }, delay)
        }
    }

    // 节流（throttle）
    // 1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
    // 2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
    function throttle(fn, delay) {
        // 记录上一次函数出发的时间
        var lastTime = 0
        return function () {
            // 记录当前函数触发时间
            var nowTime = Date.now()
            if (nowTime - lastTime > delay) {
                // 修正this指向
                fn.apply(this, arguments);
                // 同步时间
                lastTime = nowTime
            }

        }
    }

    document.onscroll = throttle(function () {
        console.log('scroll函数被触发了' + Date.now())
    }, 300)

</script>
</body>
</html>
